header{
    background-color: #F2F2F2;
    display: grid;
    grid-template-rows: repeat(2,1fr);
    padding: 10px ;
    row-gap: 12px;
    &>section{
        display: grid;
        grid-template-columns: 30px auto 30px;
        gap: 5px;
        align-items: center;
        > [class*='fa-home']{
            color: #FF6900;
            font-size: 20px;
        }
        > .input{
            display: grid;
            grid-template-columns: 25px auto;
            border: solid 1px #ddd;
            padding: 6px;
            background-color: white;
           >i{
               justify-self: center;
               color:#CECECE ;
           }
            input{
                border: none;
                outline: none;
                &::placeholder{
                    color: #CECECE;
                }
                
            }

        }
        > .user{
            justify-self: end;
            &>i{
                font-size: 20px;
                color: #666666;
            }
        }
    }
    &>nav{
        display: grid;
        grid-template-columns: auto 20px;
        .links{
            display: grid;
            grid-template-columns: repeat(6,1fr);
            align-items: center;
            a{
                text-decoration: none;
                color: #999;
                font-size: 15px;
                font-weight: 300;
                position: relative;
                &.active{
                    color:#EE6D1A ;
                    &::after{
                        content: '';
                        position: absolute;
                        display: block;
                        height: 2px;
                        background-color: #EE6D1A;
                        width: 30px;
                        bottom: -6px;
                    }
                } 
            }
        }
        .icon{
            display: grid;
            justify-items: end;
            align-items: center;
        }
    }
}